<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>Login Page - Ace Admin</title>
    <meta name="description" content="User login page" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="__STATIC__/ace/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="__STATIC__/ace/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
    <!-- text fonts -->
    <link rel="stylesheet" href="__STATIC__/ace/assets/css/fonts.googleapis.com.css" />
    <!-- ace styles -->
    <link rel="stylesheet" href="__STATIC__/ace/assets/css/ace.min.css" />
    <!--[if lte IE 9]>
            <link rel="stylesheet" href="__STATIC__/ace/assets/css/ace-part2.min.css" />
    <![endif]-->
    <link rel="stylesheet" href="__STATIC__/ace/assets/css/ace-rtl.min.css" />
    <!--[if lte IE 9]>
          <link rel="stylesheet" href="__STATIC__/ace/assets/css/ace-ie.min.css" />
    <![endif]-->
    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
    <!--[if lte IE 8]>
        <script src="__STATIC__/ace/assets/js/html5shiv.min.js"></script>
        <script src="__STATIC__/ace/assets/js/respond.min.js"></script>
    <![endif]-->
</head>

<body class="login-layout light-login">
    <div class="main-container">
        <div class="main-content">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <div class="login-container">
                        <div class="center">
                            <h1>
                                <span class="grey" id="id-text2">后台管理系统</span>
                            </h1>
                            <h4 class="blue" id="id-company-text">&copy; 米粒</h4>
                        </div>
                        <div class="space-6"></div>
                        <div class="position-relative">
                            <div id="login-box" class="login-box visible widget-box no-border">
                                <div class="widget-body">
                                    <div class="widget-main">
                                        <h4 class="header blue lighter bigger">
                                            <i class="ace-icon fa fa-coffee green"></i>
                                            登录
                                        </h4>
                                        <div class="space-6"></div>
                                        <form id="ajaxForm">
                                            <fieldset>
                                                <label class="block clearfix">
                                                    <span class="block input-icon input-icon-right">
                                                        <input type="text" name="username" class="form-control" placeholder="Username" />
                                                        <i class="ace-icon fa fa-user"></i>
                                                    </span>
                                                </label>
                                                <label class="block clearfix">
                                                    <span class="block input-icon input-icon-right">
                                                        <input type="password" name="password" class="form-control" placeholder="Password" />
                                                        <i class="ace-icon fa fa-lock"></i>
                                                    </span>
                                                </label>
                                                <div class="input-group">
                                                        <input type="text" class="form-control" name="verify_code" id="captcha" placeholder="请输入验证码" autocomplete="off" />
                                                        <div class="input-group-btn">
                                                            <img id="verify_img" src="{:captcha_src()}" onclick="refreshVerify()" style="height: 32px;">
                                                        </div>
                                                </div>
                                                <div class="space"></div>
                                                <div class="clearfix">
                                                    <label class="inline">
                                                        <input type="checkbox" class="ace" />
                                                        <!-- <span class="lbl"> Remember Me</span> -->
                                                    </label>
                                                    <button type="button" id="showToast" class="width-35 pull-right btn btn-sm btn-primary">
                                                        <i class="ace-icon fa fa-key"></i>
                                                        <span class="bigger-110">Login</span>
                                                    </button>
                                                </div>
                                                <div class="space-4"></div>
                                            </fieldset>
                                        </form>
                                    </div>
                                    <!-- /.widget-main -->
                                </div>
                                <!-- /.widget-body -->
                            </div>
                            <!-- /.login-box -->
                        </div>
                        <!-- /.position-relative -->
                        <div class="navbar-fixed-top align-right">
                            <br /> &nbsp;
                            <a id="btn-login-dark" href="#">Dark</a> &nbsp;
                            <span class="blue">/</span> &nbsp;
                            <a id="btn-login-blur" href="#">Blur</a> &nbsp;
                            <span class="blue">/</span> &nbsp;
                            <a id="btn-login-light" href="#">Light</a> &nbsp; &nbsp; &nbsp;
                        </div>
                    </div>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.main-content -->
    </div>
    <!-- /.main-container -->
    <!-- basic scripts -->
    <!--[if !IE]> -->
    <script src="__STATIC__/ace/assets/js/jquery-2.1.4.min.js"></script>
    <script src="/static/plugin/jquery.form.js"></script>
    <!-- <![endif]-->
    <!--[if IE]>
    <script src="__STATIC__/ace/assets/js/jquery-1.11.3.min.js"></script>
    <![endif]-->
    <script type="text/javascript">
    if ('ontouchstart' in document.documentElement) document.write("<script src='__STATIC__/ace/assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
    </script>
    <!-- inline scripts related to this page -->
    <script type="text/javascript">
    jQuery(function($) {
        $(document).on('click', '.toolbar a[data-target]', function(e) {
            e.preventDefault();
            var target = $(this).data('target');
            $('.widget-box.visible').removeClass('visible'); //hide others
            $(target).addClass('visible'); //show target
        });
    });



    //you don't need this, just used for changing background
    jQuery(function($) {
        $('#btn-login-dark').on('click', function(e) {
            $('body').attr('class', 'login-layout');
            $('#id-text2').attr('class', 'white');
            $('#id-company-text').attr('class', 'blue');

            e.preventDefault();
        });
        $('#btn-login-light').on('click', function(e) {
            $('body').attr('class', 'login-layout light-login');
            $('#id-text2').attr('class', 'grey');
            $('#id-company-text').attr('class', 'blue');

            e.preventDefault();
        });
        $('#btn-login-blur').on('click', function(e) {
            $('body').attr('class', 'login-layout blur-login');
            $('#id-text2').attr('class', 'white');
            $('#id-company-text').attr('class', 'light-blue');

            e.preventDefault();
        });

    });

    $("#showToast").click(function(event) {
        /* Act on the event */
        var options={
            url:"/api/v1/admin/login",
            type:"POST",
            dataType:"json",
            success: function(json){

                if(json.returnCode==1){
                    alert("登陆成功");
                    window.location.href = "{:url('Index/index')}";
                }else{
                    alert(json.returnMsg);
                    refreshVerify();
                }
            }
        };
        $("#ajaxForm").ajaxSubmit(options)
    });
    
    function refreshVerify() {
        var ts = Date.parse(new Date()) / 1000;
        $('#verify_img').attr("src", "/captcha?id=" + ts);
    }
    </script>
</body>

</html>